<template>
  <div class="company-wrap">
    <div class="search-box">
      <div class="icon1"><img src="./icon1.png" class="area" onclick="return false"/></div>
      <span class="city" @click="openCity">{{address}}</span>
      <div class="search-con">
        <div class="icon3"><img src="./icon2.png" class="search" onclick="return false"/></div>
        <input type="text" placeholder="请输入企业名称" v-model="keyWord" class="name" @blur="inputBlur"/>
      </div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="company-van"
    >
      <div class="company-box">
        <div class="company-list" v-for="(item,index) in companyList" :key="index"
             @click="openDetail(item.id,item.mechanismName)">
          <div class="picture"><img :src="item.mechanismLogo?item.mechanismLogo:require('./bg5.png')" class="logo"
                                    onclick="return false"/>
          </div>
          <div class="content">
            <div class="name">{{item.mechanismName}}</div>
            <div class="address-box">
              <img src="./icon6.png" class="icon"/>
              <span class="address">{{item.mechanismAddress}}</span>
            </div>
          </div>
          <div class="score-box">
            <img src="./score.png" class="star"/>
            <span class="score">{{item.mechanismScore}}分</span>
          </div>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="companyList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关记录~</div>
      </div>
    </div>


    <back-page @backPage="back"></back-page>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import {getSessionStore} from "../../common/js/util"
  import backPage from "../../components/backpage"

  export default {
    data() {
      return {
        keyWord: "",
        address: "",
        companyList: [],
        currentPage: 1,
        PageSize: 20,
        timer: null,
        loading: false,
        finished: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(getSessionStore("user_sign"));
      this.address = this.$route.query.city;
    },
    methods: {
      onLoad() {
        setTimeout(() => {//异步更新数据
          this.queryCompanyList();
        }, 300);
      },
      queryCompanyList() {//查询所有企业
        let area = this.address == "全国" ? "china" : this.address;
        this.axios.get(baseUrl + "/mechanismcomment/query_mechanismlist?sgin=" + this.userSign + "&mechanismName=" + this.keyWord + "&mechanismAddress=" + area + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.companyList = this.companyList.concat(resultObj.data);
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.companyList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      openCity() {//城市筛选
        this.$router.push({path: "/citytreelist"});
      },
      openDetail(id, name) {
        this.$router.push({path: "/mechanism", query: {"id": id, "name": name}});
      },
      back() {//返回
        this.$router.push({path: "/entry"});
      }
    },
    watch: {
      keyWord() {//企业名称或关键字搜索
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.currentPage = 1;
        this.PageSize = 20;
        if (!this.keyWord) {//清空
          this.companyList = [];
          this.loading = true;
          this.finished = false;
          this.queryCompanyList();
          return;
        }
        else if (!(/^[\u2E80-\u9FFF]+$/).test(this.keyWord)) {//非中文
          return;
        }
        this.timer = setTimeout(() => {
          this.companyList = [];
          this.loading = true;
          this.finished = false;
          this.queryCompanyList();
        }, 100);
      }
    },
    components: {
      backPage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .company-wrap
    wh(100%, auto)
    .search-box
      display: flex
      align-items: center
      position: fixed
      top: 0
      z-index: 1
      wh(100%, 1.2rem)
      background: rgba(60, 175, 255, 1)
      .icon1
        wh(0.48rem, 0.48rem)
        padding-left: 2.8%
        padding-right: 0.107rem
        .area
          wh(100%, 100%)
      .city
        size-color(0.413rem, rgba(255, 255, 255, 1))
        margin-right: 0.4rem
      .search-con
        display: flex
        align-items: center
        margin-left: auto
        flex: 1
        margin-right: 3.2%
        wh(7.653rem, 0.8rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.427rem)
        .icon3
          wh(0.48rem, 0.48rem)
          padding-left: 0.213rem
          padding-right: 0.24rem
          .search
            wh(100%, 100%)
        .name
          wh(80%, 0.6rem)
          line-height: 0.6rem
          size-color(0.373rem, rgba(51, 51, 51, 1))
    .company-van
      position: absolute
      top: 1.2rem
      wh(100%, auto)
      .company-box
        wh(100%, auto)
        .company-list
          display: flex
          align-items: center
          wh(100%, 1.76rem)
          border-bottom: 0.027rem solid rgba(238, 238, 238, 1)
          .picture
            wh(1.6rem, 1.2rem)
            margin-left: 3.2%
            margin-right: 3.47%
            .logo
              wh(100%, 100%)
              border-radius: 0.16rem
          .content
            display: flex
            flex-direction: column
            flex: 1
            margin-right: 0.1rem
            .name
              padding-bottom: 0.12rem
              size-color(0.4rem, rgba(51, 51, 51, 1))
              font-weight: 500
            .address-box
              display: flex
              align-items: center
              padding-top: 0.12rem
              .icon
                margin-right: 0.067rem
                wh(0.4rem, 0.4rem)
              .address
                size-color(0.347rem, rgba(153, 153, 153, 1))
          .score-box
            display: flex
            align-items: center
            margin-left: auto
            margin-right: 3.2%
            .star
              margin-right: 0.133rem
              wh(0.427rem, 0.427rem)
            .score
              size-color(0.373rem, rgba(250, 191, 72, 1))
              font-weight: 500
    .empty-wrap
      fj(center, center)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      wh(100%, auto)
      .empty-box
        wh(4.773rem, auto)
        .img-box
          wh(100%, 4.773rem)
          .empty
            wh(100%, 100%)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.427rem, rgba(153, 153, 153, 1))
</style>
